
<template>
  <div>
    <el-card style="height: 100%" class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span>修改密码</span>
      </div>
      <div class="text item">
        <div class="hello">
          <el-form
            ref="dataForm"
            :model="data"
            :rules="rules"
            inline-message
            label-width="80px"
          >
            <el-form-item label="旧密码" prop="oldPassword" style="width: 20%">
              <el-input v-model="data.oldPassword" show-password />
            </el-form-item>
            <el-form-item label="新密码" prop="password" style="width: 20%">
              <el-input v-model="data.password" show-password />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { personalModifyPassword } from '@/api/uc/user'

export default {
  name: 'Index',
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不得少于6个字符'))
      } else {
        callback()
      }
    }
    return {
      rules: {
        oldPassword: [
          { required: true, trigger: 'blur', validator: validatePassword }
        ],
        password: [
          { required: true, trigger: 'blur', validator: validatePassword }
        ]
      },
      data: {
        oldPassword: '',
        password: ''
      }
    }
  },
  mounted() {},
  methods: {
    onSubmit() {
      if (this.data.oldPassword == this.data.password) {
        this.$message.info('新密码不可与旧密码相同')
        return
      }
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          personalModifyPassword(this.data).then((res) => {
            this.$message.success('修改成功')
            this.data.oldPassword = ''
            this.data.password = ''
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.box-card {
  border: 0px solid #000;
}
</style>
